<template>
  <div class="home">
    <!-- 引入组件并在这里使用 :options是可选属性 @slot-click为点击的回调函数 具体参数可见data中 -->
    <vue-drag :options="options" @slot-click="clickDrag">
      <!-- id是必须设置的，不然会报错  可以通过class给drag元素设置css样式 或者放入你自己的组件-->
      <div id="slot-div" class="dragDiv">你好</div>
    </vue-drag>
  </div>
</template>

<script>
import vueDrag from '@/components/vueDrag.vue'
export default {
  name: 'Home',
  components: {
    vueDrag
  },
  data() {
    return {
      options:{
        position: 'left', //拖动组件初始位置 目前仅支持'left'和'right' 默认是'left'
        // width: 100, //设置元素宽度 默认为auto 高度自适应 当然你可以在css中自定义高度
        // static: true, // 默认为false
        // bottom: 50 //默认为0
      }
    }
  },
  methods: {
    clickDrag(){
      alert('牛逼，你会用了！')
    }
  },
}
</script>
<style lang="scss" scope>

.dragDiv{
  width: 100px;
  height: 100px;
  background-color: red;
  // border-radius: 50%;
}
  
</style>
